<template>
    <div class="browse-view" @touchmove="reading_state_update(true)" @click="reading_state_update(false)">

        <!--目录列表-->
        <van-popup v-model:show="popup.menu" position="left">
            <van-sidebar v-model="index" :style="{width:'46vw'}" @change="change_chapter">
                <van-sidebar-item v-for="(k,i) in menu" :title="k" :key="i"/>
            </van-sidebar>
        </van-popup>

        <div ref="progressBox" class="progress-box" v-if="pdfStart">
            <!--条形进度条-->
            <div class="progress-strip" v-if="progressShape==='strip'">
                <p >{{progressText}}</p>
                <br>
                <van-progress :percentage="percentage" />
            </div>

            <!--环形进度条-->
            <van-circle
                    v-if="progressShape==='circle'"
                    class="progress-circle"
                    v-model:current-rate="percentage"
                    :rate="30"
                    :speed="100"
                    :text="progressText"
            />

        </div>

        <strip v-if="model==='strip'" @load_img="load_img" @refresh_page="refresh_page" :paramRefreshing="refreshing" :paramImgList="imgFileList" :paramFinished="finished" :paramLoading="loading"/>

        <single v-if="model==='single'" @load_img="load_img" @refresh_page="refresh_page" @page_change="page_change"
                :currentSrc="currentSrc"
                :paramPage="page" :paramPathList="imgPathList" :paramImgList="imgFileList"
                :paramRefreshing="refreshing" :paramFinished="finished" :paramLoading="loading"/>

        <double v-if="model==='double'" @load_img="load_img" @refresh_page="refresh_page"
                :paramPage="page" :paramPathList="imgPathList" :paramImgList="imgFileList"
                :paramRefreshing="refreshing" :paramFinished="finished" :paramLoading="loading"/>

        <!--目录按钮-->
        <van-button class="show-menu-posted" type="danger" @click.stop="open_popup('menu')">
            <i class="iconfont icon-mulu"/>
        </van-button>

        <!--翻页按钮-->
        <div class="btns">
            <van-button class="btn" type="warning" @click="before">上一章</van-button>
            <van-button class="btn" type="info" @click="next">下一章</van-button>
        </div>
    </div>
</template>

<script src='./script/index.ts' lang='ts'></script>

<style src='./style/index.less' scoped type='text/less' lang='less'></style>